<script setup>
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';
import { shareFile } from '@/apis/file';
import logo from '@/assets/icons/logo.svg';
import zhuyi from '@/assets/icons/zhuyi.svg';
import { useI18nStore } from '@/stores';

const i18nStore = useI18nStore();

const toast = useToast();
const code = ref('');
const route = useRoute();
const router = useRouter();
const id = atob(route.params.id);
const data = ref({});
const past = ref(false);
function submitForm() {
  if (code.value.trim() == '') {
    toast.add({
      severity: 'error',
      summary: i18nStore.translate('please_enter_the_extraction_code_again'),
      detail: '',
      group: 'loginResult',
      life: 1500
    });
    return;
  } else if (code.value.trim() === data.value.code) {
    setTimeout(() => {
      const _id = btoa(id);
      router.replace({
        path: `/shares/${_id}`
      });
    }, 500);
    return;
  } else {
    toast.add({
      severity: 'error',
      summary: i18nStore.translate('verification_code_error_please_reinput'),
      detail: '',
      group: 'loginResult',
      life: 1500
    });
    return;
  }
}

function getFileCode() {
  shareFile({ share_id: id }).then((res) => {
    if (res.status === 0) {
      data.value = res.data;
      if (data.value.code === '') {
        const _id = btoa(id);
        router.replace({
          path: `/shares/${_id}`
        });
      }
    } else {
      past.value = true;
      toast.add({
        severity: 'error',
        summary: res.message,
        detail: '',
        group: 'loginResult',
        life: 1500
      });
    }
  });
}

onMounted(() => {
  getFileCode();
});
</script>

<template>
  <div class="share-content">
    <div
      class="share-info w-[455px] flex flex-col items-center justify-center mobile:w-full"
    >
      <div
        class="w-[100%] h-[100%] mobile:w-full flex flex-col items-center justify-center"
      >
        <div class="flex flex-col items-center justify-center" v-if="!past">
          <div class="logo w-[70px] h-[70px] cursor-pointer">
            <img :src="logo" alt="" class="w-[70px] h-[70px]" />
          </div>
          <div class="share-form mt-[50px]">
            <input
              type="text"
              v-model="code"
              :placeholder="
                i18nStore.translate('please_enter_the_extraction_code')
              "
              class="input pl-[40px] md:w-[288px] w-[100%] h-[54px] px-5 py-2.5 font-bold rounded-3xl border-0 focus:outline-theme-color text-lg"
            />
            <myButton
              class="mt-[30px] md:w-[288px] w-[100%] rounded-3xl border-0 bg-[#0095FF] text-[#fff] text-center cursor-pointer text-lg font-bold leading-[54px]"
              @click="submitForm"
            >
              {{ i18nStore.translate('extract_file') }}
            </myButton>
          </div>
        </div>

        <div class="flex flex-col items-center justify-center" v-else>
          <div class="logo w-[70px] h-[70px] cursor-pointer">
            <img :src="zhuyi" alt="" class="w-[70px] h-[70px]" />
          </div>
          <div class="w-[270px] text-[#333333] text-center mt-2">
            {{ i18nStore.translate('file_expired') }}
          </div>
          <div class="share-form mt-[10px]">
            <div
              class="mt-[30px] md:w-[288px] w-[100%] rounded-3xl border-0 bg-[#0095FF] text-[#fff] text-center cursor-pointer text-lg font-bold leading-[54px]"
              @click="router.push('/login')"
            >
              {{ i18nStore.translate('login') }}
            </div>
            <div
              class="mt-[10px] text-center text-xl font-bold cursor-pointer text-[#0095FF]"
              @click="router.push('/register')"
            >
              {{ i18nStore.translate('sign_up_now') }}
            </div>
            <div class="text-center text-[#333] mt-2 text-base">
              {{ i18nStore.translate('afiche') }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Toast position="top-center" group="loginResult" />
</template>

<style scoped lang="scss">
.share-content {
  background-color: pink;
  background-image: url(https://img1.baidu.com/it/u=2930386029,2343701221&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800);
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .share-info {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;

    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    h1 {
      color: #fff;
    }
  }
}

.input {
  background-color: rgba(255, 255, 255, 0.15);
}
.input::placeholder {
  color: #666; /* 提示文字颜色 */
}
</style>
